<template>
  <div class="app-container">
    <analyze></analyze>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
      <el-tab-pane label="仓库统计" name="ware">
        <el-form ref="queryForm" :inline="true" :model="queryParams" label-width="80px" size="mini">
          <el-form-item label="仓库名称" prop="wareName">
            <el-input v-model="queryParams.wareName" clearable placeholder="请输入" @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="wareList" :default-expand-all="isExpandAll"
                  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="wareId" border>
          <el-table-column align="center" label="仓库编号" prop="wareNo"/>
          <el-table-column align="center" label="仓库名称" prop="wareName"/>
          <el-table-column align="center" label="负责人" prop="nickName"/>
          <el-table-column align="center" label="联系方式" prop="phonenumber"/>
          <el-table-column align="center" label="仓库地址" prop="wareAddress"/>
          <el-table-column align="center" label="库存总数量" prop="commodityNumber">
            <template slot-scope="scope">
              <el-link type="primary" @click="handleSelectCommodityNumber(scope.row)">{{ scope.row.commodityNumber }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column align="center" label="库存总成本" prop="costPrice">
            <template slot-scope="scope">
              <span>{{ formattedNumber(scope.row.costPrice) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="建仓时间" prop="createTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="商品库存" name="stock">
        <el-form ref="queryForm" :model="queryParams" label-width="80px" size="mini">
          <el-row>
            <el-col :span="4">
              <el-form-item label="仓库名称" prop="wareName">
                <treeselect v-model="queryParams.wareId" :normalizer="normalizer" :options="wareOptions"
                            placeholder="请选择"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="商品名称" prop="commodityName">
                <el-input v-model="queryParams.commodityName" clearable placeholder="请输入"
                          @keyup.enter.native="handleQuery"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="商品编号" prop="commodityNo">
                <el-input v-model="queryParams.commodityNo" clearable placeholder="请输入"
                          @keyup.enter.native="handleQuery"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="时间区域">
                <el-date-picker v-model="dateRange" end-placeholder="结束日期" range-separator="-"
                                start-placeholder="开始日期"
                                style="width: 240px" type="daterange"
                                value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button v-hasPermi="['erp:statistics:export']" icon="el-icon-download" plain size="mini" type="warning"
                       @click="handleStockExport">列表导出
            </el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="commodityStockList" row-key="wareCommodityNumberId"
                  @selection-change="handleSelectionChange" border>
          <el-table-column :reserve-selection="true" align="center" type="selection" width="50"/>
          <el-table-column align="center" label="商品编号" prop="commodityNo"/>
          <el-table-column align="center" label="商品名称" prop="commodityName"/>
          <el-table-column align="center" label="规格" prop="commoditySpec" width="120"/>
          <el-table-column align="center" label="单位" prop="unitName1" width="120"/>
          <el-table-column align="center" label="成本价" prop="costPrice" sortable width="120"/>
          <el-table-column align="center" label="期初库存" prop="startNumber" sortable width="120"/>
          <el-table-column align="center" label="期初金额" prop="startPrice" sortable width="120">
            <template slot-scope="scope">
              <span>{{ formattedNumber(scope.row.startPrice) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="入库数量" prop="realityNumber" sortable width="120"/>
          <el-table-column align="center" label="入库金额" prop="realityPrice" sortable width="120">
            <template slot-scope="scope">
              <span>{{ formattedNumber(scope.row.realityPrice) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="调拨数量" prop="allocateNumber" sortable width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.allocateNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="消耗数量" prop="consumeNumber" sortable width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.consumeNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="销售数量" prop="saleNumber" sortable width="120"/>
          <el-table-column align="center" label="销售金额" prop="salePrice" sortable width="120">
            <template slot-scope="scope">
              <span>{{ formattedNumber(scope.row.salePrice) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="库存数量" prop="commodityNumber" sortable width="120"/>
          <el-table-column align="center" label="库存金额" prop="numberPrice" sortable width="120">
            <template slot-scope="scope">
              <span>{{ formattedNumber(scope.row.numberPrice) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="stockTotal > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum"
                    :total="stockTotal" @pagination="handleGetStockStatistics"/>
      </el-tab-pane>
    </el-tabs>

    <!-- 库存商品 -->
    <el-dialog :destroy-on-close="true" :title="stockTitle" :visible.sync="stockOpen" append-to-body width="80%">
      <ErpCommodity v-if="stockOpen"
                    :wareId="wareId"></ErpCommodity>
    </el-dialog>
  </div>
</template>
<script>
import analyze from './analyze.vue';
import {stockStatistics, wareStatistics} from "@/api/erp/statistics";
import ErpCommodity from '@/views/erp/ErpCommodity/selectedCommodity'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listErpWareHouse} from "@/api/erp/ErpWareHouse";
import {formattedNumber} from "@/utils/ruoyi";

export default {
  name: "ErpAccountsReceivable",
  components: {
    Treeselect,
    analyze,
    ErpCommodity
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      activeName: "ware",
      stockTotal: 0,
      wareTotal: 0,
      // 多选ids
      ids: [],
      // 仓库统计列表
      wareList: [],
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      // 商品库存统计列表
      commodityStockList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        wareName: null,
        commodityName: null,
        commodityStatus: null,
      },
      dateRange: [],
      // 库存标题
      stockTitle: '',
      stockOpen: false,
      stockList: [],
      wareId: null,
      // 仓库
      wareOptions: [],
    };
  },
  created() {
    this.getTreeselect();
    this.handleGetWareStatistics();
  },
  methods: {
    formattedNumber,
    handleGetWareStatistics() {
      wareStatistics(this.queryParams).then(
        (res) => {
          this.wareList = this.handleTree(res.data, "wareId", "warePid");
        }
      );
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.wareCommodityNumberId)
    },
    handleGetStockStatistics() {
      stockStatistics(this.addDateRange(this.queryParams, this.dateRange)).then(
        (res) => {
          this.commodityStockList = res.rows;
          this.stockTotal = res.total
        }
      );
    },
    /** 转换仓库管理数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.wareId,
        label: node.wareName,
        children: node.children
      };
    },
    /** 查询仓库管理下拉树结构 */
    getTreeselect() {
      listErpWareHouse().then(response => {
        this.wareOptions = this.handleTree(response.data, "wareId", "warePid");
      });
    },
    handleTabClick(e) {
      this.resetQuery();
      if (this.activeName == "ware") {
        this.handleGetWareStatistics();
      } else {
        this.handleGetStockStatistics();
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      if (this.activeName == "ware") {
        this.handleGetWareStatistics();
      } else {
        this.handleGetStockStatistics();
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleStockExport() {
      this.download(
        "erp/statistics/exportStock",
        {
          ...this.queryParams,
          exportIds: this.ids?.join(',')
        },
        `库存统计_${new Date().getTime()}.xlsx`
      );
    },
    // 查询仓库库存商品列表
    handleSelectCommodityNumber(row) {
      this.wareId = row.wareId;
      this.stockOpen = true;
      this.stockTitle = row.wareName + '-库存商品列表'
    }
  },
};
</script>
